<template>
	<view class="user-page">
		<view class="user-scroll">
			<view class="user-info d-f a-i-c" @click="toUserBasisInfoPage">
				<image v-if="userInfo.head_portrait" :src="userInfo.head_portrait" class="user-avatar" />
				<image v-else src="/static/images/user-avatar.png" class="user-avatar" />
				<view v-if="!isLogin" class="basis-info d-f f-d-c j-c-b">
					<view v-if="userInfo.nickname" class="user-name">{{userInfo.nickname}}</view>
					<view v-else class="user-name">{{userInfo.nickname ? userInfo.nickname : '昵称未设定'}}</view>
					<view class="user-detail">炒期货，就上搜量网</view>
				</view>
				<view v-else class="basis-info d-f f-d-c j-c-b">
					<view class="user-name">登录</view>
					<view class="user-detail">立即登录，解锁更多实用功能</view>
				</view>
			</view>
			<!-- <view class="" v-model="$isstate">
				{{$cont.test}}
			</view> -->
			<!-- <view class="" @click="clickFn">
				{{parseIntFn(520.213564)}}
			</view> -->
			<view v-for="(type, i) in Object.keys(otion)" :key="i" class="list">
				<view v-for="(item, k) in otion[type]" :key="k">
					<slw-list-item :icon="item.icon" :disabled="item.disabled && item.disabled()" :leftName="item.name"
						@click="onClickItem(item)" />
					<view class="x-line" />
				</view>
			</view>
			<bnn-float-layout :isShow="isLogin" class="login-float">
				<view class="circle">
					<image src="/static/images/user-avatar.png"></image>
				</view>
				<!-- 让你的钱聪明起来 -->
				<view class="detail d-f j-c-c">共享策略 上搜量网</view>
				<view class="user-button d-f j-c-a">
					<slw-button border circle class="button user-login" @click="toUserLoginPage">登录</slw-button>
					<slw-button circle class="button user-register" @click="toUserRegisterPage">注册</slw-button>
				</view>
			</bnn-float-layout>
		</view>

		<!-- 	<view class="coupon_box">
			<view class="other_type">
				<view class="text"><span>全面型优惠券</span></view>
			</view>
			<coupon v-for="(item, index) in coupon[0].list" :key="index" v-bind:item="item" theme="#ff0000"></coupon>
			<view class="other_type">
				<view class="text"><span>简洁型优惠券</span></view>
			</view>
			<coupon v-for="(item, index) in coupon[0].list" :key="index" v-bind:item="item" types="carts" theme="#ff6c00" color="#ffffff" solid="#ff6c00"></coupon>
		</view> -->

		<u-mask :show="newlogin" :duration="500">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="new_login">
						<view class="title">新用户福利</view>
						<view class="quan_cont" v-for="(item, key) in discount" :key="key">
							<view class="quan_num">¥{{item.amount/100}}</view>
							<view class="text">{{item.name}}</view>
						</view>
						<view class="login_btn" @click="goquanFn">前往查看</view>
						<view class="login_colse" @click="newloginFn">
							<u-icon name="close-circle" size="50"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		
		<u-mask :show="couponMsgShow" :duration="500">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="new_login">
						<view class="coupon-title">您有优惠券即将过期</view>
						<view class="coupon-list">
							<view class="coupon-cont" v-for="(item, key) in couponMsg" :key="key">
								<view class="coupon-info">
									<view class="coupon-amout">¥{{Number(item.content.amount)/100}}</view>
									<view class="coupon-name">{{item.content.name}}</view>
								</view>
								<view class="coupon-expire">到期时间： {{item.content.expire_time}}</view>
							</view>
						</view>
						<view class="login_btn" @click="goquanFn">前往查看</view>
						<view class="login_colse" @click="newloginFn">
							<u-icon name="close-circle" size="50"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	// import {init} from '@/api/trader.js'
	import Vue from 'vue'
	import {
		getMemberInfo
	} from '@/api/member.js'
	import {
		newcoupon,
		getPastCouponMsg
	} from '@/api/strategy.js'
	import {
		verifyUserLogin
	} from '@/utils/storage.js'
	import BnnFloatLayout from '@/components/login-float-layout/index.vue'
	import SlwButton from '@/components/slw-ui/button/index.vue'
	import SlwModal from '@/components/slw-ui/modal/index.vue'
	import SlwListItem from '@/components/slw-ui/list-item/index.vue'
	import {
		MEMBER_INFO
	} from '@/config/storage.js'
	import {
		toUserRealNamePage,
		toUserSetUpPage,
		toUserLoginPage,
		toUserRegisterPage,
		toUserStrategyPage,
		toUserMessagePage,
		toUserCouponPage,
		toUserBasisInfoPage,
		toStrategyMarketPage,
		toTraderBindingPage,
		toTraderEditPassPage,
		toTraderFundsDetailPage,
		toappraisalpahe,
		toAutomatedTrading,
		tofeedbackPage,
		toUsersignPage
	} from '@/utils/PageRouter.js'
	// var dcRichAlert = uni.requireNativePlugin('Trader')
	// var stett=true
	// getApp().globalData.isweituo=true
	// Vue.prototype.$cont = { test:"手机端快捷付"}
	// var weitimer=[
	// 	{test:12,app:"abc"},
	// 	{test:1234,app:"aasbc"},

	// ]
	// weitimer[1]['ageprice']=0
	export default {
		name: 'user',
		components: {
			SlwButton,
			SlwModal,
			SlwListItem,
			BnnFloatLayout
		},
		data() {
			const toOtherPage = () => {
				//
			}
			return {
				discount: [],
				integral: '',
				addstate: false,
				newlogin: false,
				couponMsgShow: false,
				couponMsg: [],
				nummember: 0,
				isLogin: false,
				isTrader: false,
				otion: {
					user: [{
							name: '消息中心',
							icon: {
								html: '&#xe865;',
								color: '#f84b53'
							},
							click: toUserMessagePage
						},
						{
							name: '我的策略',
							icon: {
								html: '&#xe63c;',
								color: '#3b83fb'
							},
							click: toUserStrategyPage
						},
						{
							name: '我的优惠券',
							icon: {
								html: '&#xe600;',
								color: '#ee4637'
							},
							click: toUserCouponPage
						},
						// {name: '观摩大盘', icon: {html: '&#xe600;', color: '#ee4637'}, click: toStrategyMarketPage},
						// {name: '推荐有礼', icon: {html: '&#xe6c0;', color: '#fa386a'}},
						// {name: '我的任务', icon: {html: '&#xe615;', color: '#008cee'}},
					],
					// trader: [
					// 	{name: '账号绑定', disabled: () => !this.isTrader, icon: {html: '&#xe640;', color: '#fcce2e'}, click: () => {
					// 		if(this.isTrader) {
					// 			toTraderBindingPage()
					// 		}
					// 	}},
					// 	{name: '资金详情', disabled: () => !this.isTrader, icon: {html: '&#xe613;', color: '#fa386a'}, click: () => {
					// 		if(this.isTrader) {
					// 			toTraderFundsDetailPage()
					// 		}
					// 	}},
					// 	{name: '密码更改', disabled: () => !this.isTrader, icon: {html: '&#xe75f;', color: '#fcce2e'}, click: () => {
					// 		if(this.isTrader) {
					// 			toTraderEditPassPage()
					// 		}
					// 	}}
					// ],
					other: [
						// {name: '消息通知', icon: {html: '&#xe820;', color: '#fcce2e'}},
						{
							name: '帮助与反馈',
							icon: {
								html: '&#xe608;',
								color: '#fa386a'
							},
							click: tofeedbackPage
						},
						{
							name: '实名认证',
							icon: {
								html: '&#xe68a;',
								color: '#008cee'
							},
							click: toUserRealNamePage
						},
						{
							name: '风险评估',
							icon: {
								html: '&#xe615;',
								color: '#fcce2e'
							},
							click: toappraisalpahe
						},
						{
							name: '自动化交易',
							icon: {
								html: '&#xe63b;',
								color: '#f84b53'
							},
							click: toAutomatedTrading
						},
						// {name: '申请入驻', icon: {html: '&#xe615;', color: '#008cee'}},
					],
					sign: [{
						name: '签到有礼',
						icon: {
							html: '&#xe6c0;',
							color: '#f84b53'
						},
						click: toUsersignPage
					}, ]
				},
				userInfo: {}
			}
		},
		watch: {

		},
		onShow() {
			// this.$isstate=false
			// getApp().globalData.isloginssss
			// this.newlogin=true
			// this.initAlert()
			verifyUserLogin().then((res) => { //登录相关
				this.isLogin = false
				this.getUserInfo()
			}).catch(e => {
				this.isLogin = true
				this.userInfo = {}
			})
		},
		//	下拉刷新
		onPullDownRefresh() {
			this.getUserInfo()
		},
		created() {
			let newuser = uni.getStorageSync('new_user')
			if (newuser != null) {
				this.discount = newuser.discount
				this.integral = newuser.integral
			}
		},
		methods: {
			parseIntFn(num) { //保留两位
				return num.toFixed(2)
			},
			clickFn() {
				clearInterval(weitimer)
				weitimer = null
				// this.$isstate=false
				// Vue.prototype.$isstate = true
			},
			newloginFn() {
				this.newlogin = false
				this.couponMsgShow = false
				getApp().globalData.islogin = false
			},
			goquanFn() {
				this.newlogin = false
				toUserCouponPage()
			},
			initAlert() {
				init().then(res => {
					this.isTrader = true
				}).catch(res => {
					this.isTrader = false
					// uni.showToast({icon: 'none', title: '登录失败！'})
				})
			},
			//	去交易模块页面
			toTraderPage() {

			},
			//	去其他普通页面
			toOtherPage(str) {
				// str
			},
			//	获取用户信息
			getUserInfo() {
				getMemberInfo().then(res => {
					if (res.data) {
						this.userInfo = res.data
						if (res.data.new_user == 1) {
							newcoupon().then(ret => {
								this.nummember = ret.data
								setTimeout(() => {
									this.newlogin = true
								}, 1000)
							})
						}
						this.reqCouponMsg()
						uni.setStorageSync(MEMBER_INFO, res.data)
						// uni.setStorageSync(MEMBER_INFO, {...res.data, review_status: 0})
						uni.stopPullDownRefresh()
					} else {
						 this.isLogin = true
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			reqCouponMsg() {
				getPastCouponMsg().then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.couponMsg = res.data
							this.couponMsgShow = true
						}
					}
				})
			},
			onClickItem(item) {
				if (item.click) {
					item.click(false)
				}
			},
			toUserLoginPage() {
				// uni.reLaunch({
				// 	url: '/pages/user/login/index'
				// })
				toUserLoginPage(true)
			},
			toUserRegisterPage() {
				toUserRegisterPage(false)
			},
			toUserCouponPage() {
				toUserCouponPage(false)
			},
			toUserBasisInfoPage() {
				toUserBasisInfoPage(false)
			}
		},
		//	点击导航栏搜索按钮事件
		onNavigationBarButtonTap(e) {
			toUserSetUpPage(false)
		}
	}
</script>


<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 75%;
		border-radius: 16rpx;
	}

	.rect {
		width: 60%;
		height: 120px;
		background-color: #FF6B4B;
		border-radius: 16rpx;
	}

	.new_login {
		// width: 70%;
		padding: 20px 10px;
		background-color: #FF6B4B;
		text-align: center;
		position: relative;
		border-radius: 16rpx;

		.title {
			font-size: 30px;
			color: #fff;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
		}
		.coupon-title {
			font-size: 36rpx;
			color: #fff;
		}
		.coupon-list {
			margin: 20rpx auto;
			max-height: 420rpx;
			overflow-y: auto;
		}
		.coupon-cont {
			background-color: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			padding: 16rpx 20rpx;
			&:last-child {
				margin-bottom: 0;
			}
			.coupon-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 1;
			}
			.coupon-name {
				font-size: 28rpx;
				font-weight: 600;
			}
			.coupon-amout {
				font-size: 48rpx;
				font-weight: 600;
				color: #FF393A;
			}
			.coupon-expire {
				color: #666666;
				font-size: 20rpx;
				text-align: right;
				margin-top: 8rpx;
			}
		}

		.quan_text {
			margin: 10px 0 20px;
		}

		.quan_cont {}

		.quan_text {
			color: #fff;
		}

		.quan_cont {
			width: 100%;
			// height: 180px;
			position: relative;
			background: red;
			margin: 10px auto;
			overflow: hidden;

			.quan_num {
				// width: 100%;
				background-color: #fff;
				color: #FF393A;
				font-size: 40px;
				font-weight: bold;
			}

			.text {
				color: #fff;
				font-size: 14px;
				margin: 5px 0;
			}
		}

		// .quan_cont:before,
		// .quan_cont:after {
		//   content: '';
		//   display: block;
		//   width: 20px;
		//   height: 100%;
		//   background-color: #FF6B4B;
		//   background-size: 20px 20px; /* 一个repeat的大小 */
		//   background-repeat: repeat-y;
		//   background-image: radial-gradient(#fff 8px, transparent 8px);
		//   position: absolute;
		//   top: 0;
		// }
		// .quan_cont:before {
		//   left: -10px; /* 半圆，只显示一个repeat的一半 */
		// }
		// .quan_cont:after {
		//   right: -10px; 
		// } 
		.login_btn {
			background-color: #fff;
			padding: 5px 10px;
			border-radius: 20px;
			font-size: 16px;
			color: #FF6B4B;
		}

		.login_colse {
			position: absolute;
			bottom: -40px;
			color: #fff;
			left: 50%;
			transform: translate(-50%, 50%);
		}
	}

	.user-scroll {
		/* #ifndef APP-PLUS */
		/* #endif*/
		//height: calc(200vh - var(--window-bottom));
		//min-height: 240rpx;
		/* #ifndef APP-PLUS */
		//height: calc(200vh - var(--window-bottom));
		/* #endif*/
		.login-float /deep/ {
			.layout-body {
				height: 240rpx;
				min-height: 240rpx;
				position: relative;

				.layout-body__content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}

		.circle {
			width: 180rpx;
			height: 180rpx;
			background: #f8f8f8;
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			top: -90rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.detail {
			color: #333;
			margin-top: 80rpx;
		}

		.user-button /deep/ {
			padding: 20rpx 20rpx 0;

			.button {
				button {
					height: 40px;
					font-size: 16px;
				}

				width: 140px;
			}

			.user-login {
				button {
					color: $theme_color;
					background: transparent;

					&:after {
						border-color: $theme_color;
					}
				}
			}
		}
	}

	.user-info {
		height: 100rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;

		.user-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.basis-info {
			height: 80rpx;

			.user-name {
				color: #333;
				font-size: 28rpx;
			}

			.user-detail {
				color: #999;
				font-size: 20rpx;
			}
		}
	}

	.user-scroll {
		height: 100%;
		background: #f6f6f6;

		.list-item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-left {
				display: flex;
				align-items: center;

				.left-icon {
					color: #333;
					font-size: 40rpx;
					margin-right: 10rpx;
				}

				.left-name {
					color: #333;
					line-height: 1;
				}
			}

			.item-right {
				color: #999;
				display: flex;
				align-items: center;

				.right-name {
					line-height: 1;
				}

				.right-icon {
					margin-left: 10rpx;
				}
			}
		}
	}

	.list {
		background: #fff;
		// padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
</style>
